<template>
  <div :style="{ width: props.width, height: props.height }">
    <el-button
      :style="{ width: props.width, height: props.height }"
      :type="states.type"
      :plain="states.plain"
      :round="states.round"
      :circle="states.circle"
      :disabled="states.disabled"
      :size="states.size"
      :text="states.text"
      @click="handleClick"
      >{{ states.value }}</el-button
    >
  </div>
</template>

<script setup lang="ts">
import { computed, ref } from "vue";
import { useEventHandle } from "@renderer/utils/componentEvent";
const { handleClickQuery } = useEventHandle();
let props = defineProps({
  width: {
    type: String,
    default: "",
  },
  height: {
    type: String,
    default: "",
  },
  id: {
    type: String,
    default: "",
  },
  models: {
    type: Object,
    default: () => ({}),
  },
});
const states = computed({
  get: () => props.models,
  set: () => {},
}) as any;

// const emit = defineEmits(["handleClickLink", "handleClickQuery"]);
const handleClick = () => {
  if (!states.value.event.targetComponent.length) return;
  states.value.event.targetComponent.forEach((item) => {
    if (states.value.event.clickType == "query" && item.targetComponentId) {
      handleClickQuery(item.targetComponentId, props.id, {});
    }
  });
};
</script>

<style scoped lang="scss">
:deep(.el-button > span) {
  font-size: v-bind("states.fontSize") !important;
  color: v-bind("states.color") !important;
}
</style>
